<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
		<head>
			<meta charset="UTF-8">
			 <meta http-equiv="X-UA-Compatible" content="IE=edge">
			 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
			<meta name="apple-mobile-web-app-capable" content="yes">
			<meta name="apple-mobile-web-app-status-bar-style" content="black">
	   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
			<title></title>
			<link href="css/bootstrap.min1.css" rel="stylesheet">
			<!--App自定义的css-->
			<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
			<link href="css/mui.min1.css" rel="stylesheet" />
			<style type="text/css">
				.gouwu{
					font-size: 20px;
				}
				.row{
					margin-top: 20px;
				}
				.guanli{
					font-size: 20px;
					color: #A2A2A2;
				}
				.dianpu>div {
					height: 45px;
				}
				.shop{
					height: 50px;
				}
				.row div{
					padding-left: 0px;
					padding-right: 0px;
				}
				.icon{
					display: inline-block;
					margin-left: 70px;
					vertical-align: middle;
				}
				.mui-btn-numbox-plus{
					margin-right: 10px;
				}
				.col-xs-6{
					height: 30px;
				}
				.col-xs-10,.col-xs-4,.col-xs-8,.kuang
				{
					height: 200px;
				}
				.wenzi{
					height: 70px;
					font-size: 16px;
					letter-spacing: 1px;
					line-height: 22px;
					font-weight: bold;
					font-family: "微软雅黑 Light";
					color: #4B4B4B;
				}
				.price{
					color: red;
					font-weight: bold;
					font-size: 18px;
					margin-top: 8px;
					display: inline-block;
				}
				.dibu{
					width: 100%;
					height: 70px;
					position: fixed;
					bottom: 0px;
					border-top: 1px solid #f1f1f1;
					background: white;
				}
				.shopcenter{
					margin-top: 27px;
				}
				.dibucheck{
					margin-top: 12px;
				}
				.dibucheck span{
					display: inline-block;
					font-size: 18px;
					font-weight: bold;
					font-family: "微软雅黑 Light";
					margin-top: 12px;
					margin-left: 52px;
				}
				.dibu b{
					display: inline-block;
					font-size:16px ;
					color: #848484;
					width: 100px;
					margin-left:180px ;
					position: absolute;
					top: 10px;
					right:35%;
					font-weight: light;
					text-align: right;
				}
				.dibu b span:nth-of-type(1){
					color: red;
					font-weight: bold;
					font-size:18px ;
				}
				.button{
					width: 120px;
					height: 70px;
					background: red;
					color: white;
					font-size: 20px;
					font-weight: bold;
					font-family: "微软雅黑";
					position: absolute;
					top: 0px;
					right: 0px;
				}
				.aaa{
					line-height: 40px;
				}
			</style>
		</head>
		<body>
			<div class="container-fluid header" style="background: white;">
				<div class="row">
					<div class="col-xs-1 text-right right">
		                <svg xmlns="http://www.w3.org/2000/svg" class="icon1" viewBox="0 0 1024 1024" width="20" height="25" t="1566440247989" p-id="16116" version="1.1"><path fill="#A2A2A2" d="M 766.862 1021.72 c -10.24 0 -20.594 -3.64 -28.444 -10.922 L 228.693 538.396 c -15.701 -14.563 -15.701 -38.229 0 -52.792 L 738.418 13.198 c 15.701 -14.563 41.187 -14.563 56.889 0 c 15.701 14.564 15.701 38.23 0 52.793 L 314.027 512 l 481.28 446.009 c 15.701 14.563 15.701 38.23 0 52.793 c -7.851 7.282 -18.205 10.922 -28.445 10.922 Z" p-id="16117" /></svg>
					</div>
					<div class="col-xs-9 text-center center">
		                <p class="gouwu">购物车</p>
		               
		            </div>
		            <div class="col-xs-2 text-left left">
		                <p class="guanli">管理</p>
					</div>
				</div>
	    	</div>
	    	<c:forEach items="${commentList }" var="comm">
	    	<div class="container-fluid header" style="background: white;">
	    		
				<div class="row" style="height: 150px; ">
					
					<div class="col-xs-12 dianpu">
						<div class="col-xs-12">
							<div class="mui-input-row mui-checkbox mui-left">
								<svg t="1566653590134" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2754" width="20" height="20"><path d="M876.11392 62.85824l-8.13568-12.2368L166.81472 50.62144l-8.20736 10.496C-20.05504 289.20832 4.66432 428.09344 35.2768 490.62912c30.71488 62.63808 92.89216 103.18336 158.47424 103.18336l5.9136 0c82.74944-3.3024 137.7792-44.3904 166.76352-74.14272 26.17856 29.75744 75.45344 69.53984 152.59648 69.53984 80.42496 0 130.60096-43.31008 155.72992-73.37472 35.08736 28.60544 103.5776 75.48416 175.37024 75.48416 47.06816 0 87.39328-19.28704 120.23808-57.31328C1092.20864 392.10496 884.992 76.23168 876.11392 62.85824L876.11392 62.85824 876.11392 62.85824M928.2816 498.37568c-22.08256 25.84064-47.66208 38.17472-78.26944 38.17472-69.1968 0-141.07136-62.66368-157.09696-77.54752L692.9152 271.13984c0.02048-0.53248 0.29696-0.9216 0.29696-1.43872 0-15.22176-12.30848-27.53024-27.47392-27.53024-15.19104 0-27.47904 12.30848-27.47904 27.53024l-0.29696 0 0 204.28288c-15.00672 20.4544-53.03296 60.45696-118.94272 60.45696-74.40384 0-113.16224-50.87744-123.65824-67.0464L395.36128 269.696c0-15.21664-12.30336-27.52512-27.44832-27.52512-15.19104 0-27.49952 12.30848-27.49952 27.52512l0 196.69504c-13.4656 17.52064-59.81184 69.36064-142.96064 72.79616l-3.69664 0 0-0.06144c-36.67968 0-84.63872-22.49216-109.12256-72.6272-24.52992-50.01216-42.3168-163.03616 109.06624-361.10848l644.46976 0C895.37536 195.80416 1003.89888 410.64448 928.2816 498.37568L928.2816 498.37568M878.48448 624.97792c-15.24736 0-27.66336 12.3648-27.71456 27.61216l0 0.05632 0 0.10752 0 0.06656 0 199.28576c0 30.66368-24.85248 55.5008-55.43424 55.5008l-237.53216 0-0.0512 0-330.752 0c-30.58176 0-55.43936-24.83712-55.43936-55.5008l0-199.42912c-0.03072-15.30368-12.41088-27.68896-27.68896-27.68896-15.27808 0-27.66336 12.38528-27.71968 27.68896l0 204.96896c0 58.26048 47.12448 105.4464 105.28768 105.4464l579.45088 0c58.15808 0 105.28256-47.18592 105.28256-105.4464l0-205.05088C906.10688 637.33248 893.73696 624.97792 878.48448 624.97792L878.48448 624.97792 878.48448 624.97792M878.48448 624.97792 878.48448 624.97792z" p-id="2755" fill="#A8A8A8"></path></svg>
								<label class="aaa">${comm.shopName }</label>
								<input name="checkbox" value="Item 1" type="checkbox">
								
							</div>
						</div>
					</div>
					<div class="col-xs-12 dianpu" style="height: 110px;">
						<div class="col-xs-2 kuang" >
								<div class="mui-input-row mui-checkbox mui-left shopcenter">
									
									<input name="checkbox" value="Item 1" type="checkbox">
								</div>
						</div>
						<div class="col-xs-10" >
							<div class="col-xs-12 dianpu shop">
								<div class="col-xs-4">
									<img src="img/${comm.commodityPicture }" width="100.44px" height="98px" />
								</div>
								<div class="col-xs-8">
									<div class="col-xs-12 wenzi">
										${comm.commodityTitle }
									</div>
									<div class="col-xs-12">
										<div class="col-xs-6">
											<span class="price">${comm.prive }</span>
										</div>
										<div class="col-xs-6">
											<div class="mui-content">
												<div class="mui-content-padded">
													<div class="mui-numbox">
														<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
														<input class="mui-input-numbox" type="number" />
														<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			</c:forEach>
			<div class="dibu">
				
					<div class="mui-input-row mui-checkbox mui-left dibucheck" >
						<input name="checkbox" value="Item 1"type="checkbox"><span>全选</span>
					</div>
					<b>总计:<span>￥270</span><span>免运费</span></b>
					<button class="button" type="submit">结算</button>
			
			</div>
			
		
				
		</body>
		<script src="js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			mui('.mui-input-group').on('change', 'input', function() {
				var value = this.checked?"true":"false";
				this.previousElementSibling.innerText = "checked："+value;
			});
		</script>
	</html>
